<div class="refund-no">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw', 'top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="refund-no-header">
    <div class=" ui-g-12">
      <!--<div class="ui-g-1 refund-no-header-btn refund-no-header-btn-add" (click)="refundNoAddClick()">-->
      <!--<img class="refund-no-header-img-add" src="assets/images/ic_add.png" alt="">-->
      <!--<span>增 加</span>-->
      <!--</div>-->
      <!--<div class="ui-g-1 refund-no-header-btn refund-no-header-btn-modify" (click)="refundNoModifyClick()">-->
      <!--<img class="refund-no-header-img-modify" src="assets/images/ic_modify.png" alt="">-->
      <!--<span>修 改</span>-->
      <!--</div>-->
      <!--<div class="ui-g-1 refund-no-header-btn refund-no-header-btn-delete" (click)="refundNoDeleteClick()">-->
      <!--<img class="refund-no-header-img-delete" src="assets/images/ic_delete.png" alt="">-->
      <!--<span>删 除</span>-->
      <!--</div>-->
      <!--<div style="margin-top: 4.5vh;font-size: 0.875rem;margin-left: 1vw">-->
        <!--<label style="color: #fff;margin-left: 0.5vw" >小区：</label>-->
        <!--<p-dropdown [options]="SearchOption.village"  scrollHeight="100px" placeholder="请选择小区..." (onChange)="VillageChange($event)"></p-dropdown>-->
        <!--<label style="color: #fff;margin-left: 0.5vw">地块：</label>-->
        <!--<p-dropdown [options]="SearchOption.region" scrollHeight="100px" placeholder="请选择地块..." (onChange)="regionChange($event)"></p-dropdown>-->
        <!--<label style="color: #fff;margin-left: 0.5vw">楼栋：</label>-->
        <!--<p-dropdown [options]="SearchOption.building"  scrollHeight="100px" placeholder="请选择楼栋..." (onChange)="buildingChange($event)"></p-dropdown>-->
        <!--<label style="color: #fff;margin-left: 0.5vw">单元：</label>-->
        <!--<p-dropdown [options]="SearchOption.unit"   scrollHeight="100px" placeholder="请选择单元..." (onChange)="unitChange($event)"></p-dropdown>-->
      <!--</div>-->
    </div>
    <!--//搜索-->
    <div class="ui-inputgroup refund-no-header-search" *ngIf="!btnHiden[0].hidden">
      <p-dropdown [options]="searchOption" placeholder="请选择搜索范围.."  scrollHeight="100px"  [(ngModel)]="searchType" [style]="{'width':'8vw','margin-right':'2vw'}"></p-dropdown>
      <input type="text" pInputText placeholder="请输入需要搜索的值"  [(ngModel)]="searchData">
      <button id="disabled-btn" class="refund-no-header-btn-search" type="button"  (click)="refundNoSearchClick()"  label="搜索">搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="refund-no-table">
  <p-scrollPanel [style]="{width:'100%',height: '90%'}" styleClass="custombar">
      <p-table [columns]="refundNoTableTitle" [value]="refundNoTableContent"  [(selection)]="refundNoSelect" (onRowSelect)="refundNoonRowSelect($event)">
        <ng-template pTemplate="header" let-columns>
          <tr >
            <th style="width: 3em"  [ngStyle]="this.refundNoTableTitleStyle">
              <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns"  [ngStyle]="this.refundNoTableTitleStyle">
              {{col.header}}
            </th>

          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=1" [ngStyle]="{'background':this.table.tableContent[0].background,'color':this.table.tableContent[0].color,'text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1);" >
              {{rowData[col.field]}}
            </td>
            <td>
              <button class="refund-no-table-Btn refund-no-table-Btn-detail" (click)="refundNoDetailClick(rowData)" >详情</button>
              <div *ngIf="rowData.refundStatus !== '未退'" style="display: inline-block">
                <button class="refund-no-table-Btn refund-no-table-Btn-Refund" style="background: #747474; margin-top: 0.5vh"  (click)="InfoRefundClick(rowData)"  [disabled]="rowData.refundStatus !== '未退'">退款申请</button>
              </div>
              <div *ngIf="rowData.refundStatus === '未退'" style="display: inline-block">
                <button class="refund-no-table-Btn refund-no-table-Btn-Refund" style="margin-top: 0.5vh" (click)="InfoRefundClick(rowData)" >退款申请</button>
              </div>
            </td>
          </tr>
          <tr [pSelectableRow]="rowData"  *ngIf="rowIndex%2!=0" [ngStyle]="{'background':this.table.tableContent[1].background,'color':this.table.tableContent[1].color,'text-align': 'center','height':'2vw'}">
            <td>
              <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td  *ngFor="let col of columns.slice(0,columns.length-1);" >
              {{rowData[col.field]}}
            </td>
            <td>
              <button class="refund-no-table-Btn refund-no-table-Btn-detail" (click)="refundNoDetailClick(rowData)" >详情</button>
              <div *ngIf="rowData.refundStatus !== '未退'" style="display: inline-block">
                <button class="refund-no-table-Btn refund-no-table-Btn-Refund" style="background: #747474;margin-top: 0.5vh" (click)="InfoRefundClick(rowData)" aria-disabled="true"  [disabled]="rowData.refundStatus !== '未退'">退款申请</button>
              </div>
              <div *ngIf="rowData.refundStatus === '未退'" style="display: inline-block">
                <button class="refund-no-table-Btn refund-no-table-Btn-Refund" style="margin-top: 0.5vh" (click)="InfoRefundClick(rowData)" >退款申请</button>
              </div>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </p-scrollPanel>
  </div>
  <p-dialog header="退款申请" [(visible)]="RefundDialog" [width]="600" >
    <!--Content-->
    <div class="ui-g ui-fluid" style="line-height: 4vh">
      <!--报表显示数据-->
      <div class="ui-g-12">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>退还金额:</span>
        </div>
        <div class="ui-g-6">
          <span>￥{{ApplicationRefund.refundableAmount}}</span>
        </div>
        <div class="ui-g-2"></div>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>实收金额:</span>
        </div>
        <div class="ui-g-6">
          <span>￥{{ApplicationRefund.actualMoneyCollection}}</span>
        </div>
        <div class="ui-g-2"></div>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>扣款原因:</span>
        </div>
        <div class="ui-g-6">
          <span>{{refundReason}}</span>
        </div>
        <div class="ui-g-2"></div>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>退还银行卡金额:</span>
        </div>
        <div class="ui-g-6">
          <input type="text" pInputText placeholder="请输入退款金额" [(ngModel)]="ApplicationRefund.transferCardAmount" (blur)="transferCardAmountChange('transferCardAmount')">
        </div>
        <div class="ui-g-2"></div>
      </div>
      <div class="ui-g-12">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>抵扣物业费金额:</span>
        </div>
        <div class="ui-g-6">
          <input type="text" pInputText placeholder="请输入抵扣物业费金额" [(ngModel)]="ApplicationRefund.deductionPropertyFee" (blur)="transferCardAmountChange('deductionPropertyFee')">
        </div>
        <div class="ui-g-2"></div>
      </div>
      <div class="ui-g-12" [ngStyle]="{'line-height':'2vh'}">
        <div class="ui-g-2"></div>
        <div class="ui-g-3">
          <span>备注:</span>
        </div>
        <div class="ui-g-6">
          <textarea type="text" pInputText placeholder="请输入备注..." [(ngModel)]="ApplicationRefund.remark"></textarea>
        </div>
        <div class="ui-g-2"></div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="refund-no-dialog-Btn refund-no-dialog-Btn-sure" (click)="budgetClick()">预 算</button>
        <button class="refund-no-dialog-Btn refund-no-dialog-Btn-sure" (click)="refundSureClick()">确 认</button>
        <button class="refund-no-dialog-Btn refund-no-dialog-Btn-false" (click)="RefundDialog = false;clearData()">取 消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--  显示预算-->
  <p-dialog header="预算详情" [(visible)]="budgetDialog" [width]="800" >
    <!--Content-->
    <div class="ui-g ui-fluid" style="line-height: 4vh">
      <!--报表显示数据-->
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
            房间编号:
        </div>
        <div class="ui-g-8">
          <input type="text" pInputText disabled [(ngModel)]="budgetClass.roomCode">
        </div>
      </div>
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
          房间面积:
        </div>
        <div class="ui-g-8">
          <input type="text" pInputText disabled [(ngModel)]="budgetClass.roomSize">
        </div>
      </div>
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
          月份:
        </div>
        <div class="ui-g-8">
          <input type="number" pInputText  [(ngModel)]="budgetClass.datedif" (change)="budgetFree()">
        </div>
      </div>
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
          物业费:
        </div>
        <div class="ui-g-8">
          <input type="text" pInputText  [(ngModel)]="budgetClass.amoutReceivable" disabled>
        </div>
      </div>
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
          开始时间:
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="budgetClass.startTime" placeholder="请选择开始日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2100" [locale]="esDate" disabled></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class = "ui-g-4" style="text-align: right">
          结束时间:
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="budgetClass.endTime" placeholder="请选择结束日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2100" [locale]="esDate" disabled></p-calendar>
        </div>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
<!--        <button class="refund-no-dialog-Btn refund-no-dialog-Btn-sure">确 认</button>-->
        <button class="refund-no-dialog-Btn refund-no-dialog-Btn-false" (click)="budgetCancle()">取 消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--详情弹窗-->
  <rbi-detail-pop [dialogOption]="infoNoOption"></rbi-detail-pop>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
</div>
